<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="50%"
    @close="handleClose"
  >
    <el-form
      ref="bookForm"
      :model="formData"
      :rules="rules"
      label-width="100px"
      label-position="left"
    >
      <el-form-item label="图书编号" prop="number">
        <el-input v-model="formData.number" placeholder="请输入图书编号" />
      </el-form-item>
      
      <el-form-item label="图书名称" prop="bookName">
        <el-input v-model="formData.bookName" placeholder="请输入图书名称" />
      </el-form-item>
      
      <el-form-item label="图书类型" prop="type">
        <el-select v-model="formData.type" placeholder="请选择图书类型">
          <el-option label="文学类" value="文学类" />
          <el-option label="科技类" value="科技类" />
          <el-option label="历史类" value="历史类" />
          <el-option label="艺术类" value="艺术类" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="作者" prop="author">
        <el-input v-model="formData.author" placeholder="请输入作者" />
      </el-form-item>
      
      <el-form-item label="价格" prop="price">
        <el-input-number 
          v-model="formData.price" 
          :min="0" 
          :precision="2" 
          :controls="false"
          style="width: 100%"
        />
      </el-form-item>
      
      <el-form-item label="语言" prop="language">
        <el-input v-model="formData.language" placeholder="请输入语言" />
      </el-form-item>
      
      <el-form-item label="图书位置" prop="location">
        <el-input v-model="formData.location" placeholder="请输入图书位置" />
      </el-form-item>
      
      <el-form-item label="出版社" prop="publisher">
        <el-input v-model="formData.publisher" placeholder="请输入出版社" />
      </el-form-item>
      
      <el-form-item label="图书封面">
        <el-upload
          action="#"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleCoverChange"
        >
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
              {{ formData.cover?.name || (props.mode === 'edit' && props.bookData.coverUrl ? '已上传封面' : '未上传封面') }}
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  mode: {
    type: String,
    default: 'add',
    validator: value => ['add', 'edit'].includes(value)
  },
  bookData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['submit', 'close'])

const dialogVisible = ref(false)
const bookForm = ref(null)
const formData = ref({
  number: '',
  bookName: '',
  type: '',
  author: '',
  price: 0,
  language: '',
  location: '',
  publisher: '',
  cover: null
})

const rules = {
  number: [{ required: true, message: '请输入图书编号', trigger: 'blur' }],
  bookName: [{ required: true, message: '请输入图书名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择图书类型', trigger: 'change' }],
  author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
  price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
  language: [{ required: true, message: '请输入语言', trigger: 'blur' }],
  location: [{ required: true, message: '请输入图书位置', trigger: 'blur' }],
  publisher: [{ required: true, message: '请输入出版社', trigger: 'blur' }]
}

const dialogTitle = computed(() => {
  return props.mode === 'add' ? '添加图书' : '编辑图书信息'
})

// 打开弹窗
const openDialog = () => {
  if (props.mode === 'edit') {
    formData.value = {
      ...props.bookData,
      price: Number(props.bookData.price) || 0
    }
  } else {
    resetForm()
  }
  dialogVisible.value = true
}

// 重置表单
const resetForm = () => {
  formData.value = {
    number: '',
    bookName: '',
    type: '',
    author: '',
    price: 0,
    language: '',
    location: '',
    publisher: '',
    cover: null
  }
}

// 关闭弹窗
const handleClose = () => {
  bookForm.value?.resetFields()
  emit('close')
}

// 封面文件变化
const handleCoverChange = (file) => {
  formData.value.cover = file.raw
}

// 提交表单
const handleSubmit = async () => {
  try {
    await bookForm.value.validate()
    
    const formDataToSend = new FormData()
    for (const key in formData.value) {
      if (formData.value[key] !== null && formData.value[key] !== undefined) {
        formDataToSend.append(key, formData.value[key])
      }
    }
    
    emit('submit', formDataToSend)
    dialogVisible.value = false
  } catch (error) {
    ElMessage.error('请填写完整信息')
  }
}

defineExpose({
  openDialog,
  closeDialog: () => {
    dialogVisible.value = false
  }
})
</script>

<style scoped>
.el-upload__tip {
  margin-left: 10px;
  color: var(--el-text-color-secondary);
  font-size: 12px;
  display: inline-block;
}
</style>